<template>
    <div class="news">
        <ul>
           <li v-for="news in newsList" :key="news.id">
            <!-- 第一种写法-->
            <!-- <RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{ news.title }}</RouterLink> -->

            <!--第二种写法-->
            <RouterLink :to="{
              path:'/news/detail',
              query:{
                id:news.id,
                title:news.title,
                content:news.content
              }

            }">{{ news.title }}</RouterLink>
           </li>
        </ul>
        
        <!--展示区-->
        <div class="news-content">
            <RouterView/>
        </div>

    </div>
  </template>
  
  <script setup lang="ts" name="News">
    import { title } from 'process';
import {reactive} from 'vue'
    import {RouterView,RouterLink} from 'vue-router'

  let newsList = reactive([
    {id:'adfaf001',title:'很好的抗癌物质',content:'西蓝花'},
    {id:'adfaf002',title:'如何一夜暴富',content:'西蓝花'},
    {id:'adfaf003',title:'好消息s',content:'西蓝花'}
  ])

  </script>
  
  <style scoped>
    .news{
        padding:0 20px;
        display: flex;
        justify-content: space-between;
        height: 100%;
    }

    .news ul{
        margin-top: 30px;
        /* list-style: none; */
        padding-left: 10px;
    }

    .news li::marker{
      color: #64967E;
    }

    .news li>a{
        font-size: 18px;
        line-height: 40px;
        text-decoration: none;
        color: #64967E;
        text-shadow: 0 0 1px rgb(0 84,0);
    }

    .news-content{
        width: 70%;
        height: 90%;
        border: 1px solid;
        margin-top: 20px;
        border-radius: 10px;
    }

  </style>